<script type="text/javascript" src="${ctx}/resources/js/datatable-query.js"></script>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="codec" uri="/WEB-INF/tld/codec.tld"%>
<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<div class="box closed">
<div class="blue title">
<h4><span>Upload here ..</span></h4>
<a href="#" class="minimize">Minimize</a></div>
<div class="content">

<form id="uploadForm" method="POST" enctype="multipart/form-data"
	action="${ctx}/template/upload/">
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid"><label class="form-label span4"
	for="textarea">Upload File：</label> <input id="file" type="file"
	name="file" size="30" class="ifile"
	onchange="this.form.filePath.value=this.value.substr(this.value.lastIndexOf('\\')+1);" />
</div>
</div>
</div>

<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid"><label class="form-label span4">Encode
</label>
<div class="span4 controls" id="currencyPair"><select
	name="encoding">
	<option value="UTF-8">UTF-8</option>
	<option value="GBK">GBK</option>
</select></div>
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid"><label class="form-label span4">Auto
Mapping </label>
<div class="span4 controls"><input type="checkbox" name="auto"
	value="true" class="styled" style="opacity: 0;"></div>
</div>
</div>
</div>


<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid"><label class="form-label span4"
	for="checkboxes">Please choose template type</label>

<div class="span8 controls">

<div class="left marginT5">
<div class="checker" id="uniform-undefined"><span class="">
<input type="checkbox" name="suffixs" value="ftl" class="styled"
	style="opacity: 0;"> </span></div>
ftl</div>
<div class="left marginT5">
<div class="checker" id="uniform-undefined"><span class="">
<input type="checkbox" name="suffixs" value="html" class="styled"
	style="opacity: 0;"></input> </span></div>
html</div>
<div class="left marginT5">
<div class="checker" id="uniform-undefined"><span class="">
<input type="checkbox" name="suffixs" value="htm" class="styled"
	style="opacity: 0;"></input> </span></div>
htm</div>
<div class="left marginT5">
<div class="checker" id="uniform-undefined"><span class="">
<input type="checkbox" name="suffixs" value="txt" class="styled"
	style="opacity: 0;"></input> </span></div>
txt</div>
</div>

</div>
</div>
</div>
<div class="form-actions">
<button id="upload" class="btn btn-info">Upload</button>
</div>


</form>

</div>
</div>
</div>
</div>



<div class="box gradient">
<div class="title">
<h4><span>Template </span>

<span class="box-form right"> <!-- <shiro:hasPermission
	name="template:delete">
	<a href="#" id="del" class="btn btn-mini">Delete</a>
	 -->
</shiro:hasPermission> <shiro:hasPermission name="template:edit">
	<a href="#" id="generate" class="btn btn-mini">Generate</a>
</shiro:hasPermission> <shiro:hasPermission name="template:edit">
	<a href="#" id="synchronize" class="btn btn-mini">Synchronize</a>
</shiro:hasPermission> </span></h4>


<a href="#" class="minimize">Minimize</a></div>

<div class="content scrollable clearfix">
<table class="ajaxTable display table table-bordered">
	<thead>
		<tr>
			<th><a id="select_all"><span class="icomoon-icon-checkmark-2"></span></a></th>
			<th>Template name</th>
			<th>Template path</th>
			<th>Language</th>
			<th>Operation</th>
		</tr>
	</thead>
</table>
</div>
</div>
</div>
<script src="${ctx }/resources/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
var render = false;
var oTime = "";
var oTable;
$(document).ready(function () {
	oTable = $('.ajaxTable').dataTable({
		"aoColumnDefs": [
		       		  { 'bSortable': false, 'aTargets': [0] }
		       		],
		"bLengthChange": true,
		"sAjaxSource": '${ctx}/template/',
		"fnInitComplete": function (oSettings, json) { }
	});
	var name = $("<input>").attr({
		type: "text",
		field: "name",
		op: "cn",
		placeholder: "Template Name",
		class: "filterdata"
	});
	var searchLabel = $("<label>").html("Search:").css("display", "inline");
	var filterDiv = $("<div>").addClass("dataTables_filter").append(searchLabel).append(name);
	$('.dataTables_wrapper').prepend(filterDiv);

	$(".filterdata").keyup(function () {
		updateGrid();
	});
 	
});
function updateGrid() {
	window.clearTimeout(oTime);
	oTime = setTimeout(function () { oTable.fnDraw(); }, 500);
}

var columnHeader = ['id','name', 'path', 'language'];
var QueryData = function (aoData) {
	return johnny.initQueryData(aoData, columnHeader);
}

 
var DataTableForm = function (json, echo) {
	var dataArray = new Array();
	for (var i = 0; i < json.result.length; i++) {
		var link = "${ctx}/template/"+json.result[i].id+"/edit/";
		var inline = "${ctx}/template/"+json.result[i].id+"/air/";
		var subArray = new Array();
		var value = johnny.getForSelect(json.result[i].id);
 		subArray.push(value);
		subArray.push(json.result[i].name);
		subArray.push(json.result[i].path);
		subArray.push(json.result[i].language);
		if (json.result[i].inlineEdit){
			subArray.push(johnny.getInlineAndEdit(link,inline));
		}else{
			subArray.push(johnny.getEditHtml(link));
		}

		dataArray.push(subArray);
	}
	return {
		sEcho: echo,
		iTotalRecords: json.totalCount,
		iTotalDisplayRecords: json.totalCount,
		aaData: dataArray
	};
}




	$(function(){
				
		$("#del").click(function(){
			var items = johnny.select();
			if(items && items.length <=0){
				alert("Do you want to delete");
				return false;
			}
			if(confirm("Do you want to delete ?")){
				$('input[name="_method"]').remove();
				$("#myForm").attr("action", "${ctx}/template/delete/")
							.attr("method","post")
							.append('<input type="hidden" name="_method" value="DELETE" />')
							.submit();
				
				return false;
			}
		});
		$("#synchronize").click(function(){
			$.ajax({
				url : "${ctx}/template/synchronize/",
				type : "POST",
				data : {"_method" : "PUT"},
				dataType : "json",
				success : function(data){
					if(data.state && data.state.indexOf("SUCCESS") != -1){
						johnny.success("synchronize file success");
						return;
					}else{

						johnny.error("Please try later "+data.message);

				}
					
				//	location.reload();
				}
			});
			
			return false;
		});
		
		
		
		$("#generate").click(function(){
			
			$.ajax({
				url : "${ctx}/template/generate/",
				type : "POST",
				data : {"_method" : "PUT"},
				dataType : "json",
				success : function(data){
					if(data.state && data.state.indexOf("SUCCESS") != -1){
						johnny.success("generate file success");
						return;
					}
					
					johnny.error("Please try later");
					location.reload();
				}
			});
			
			return false;
		});
		
	});
</script>
<button type="button" class="btn btn-info"
	onclick="javascript:history.go(-1);">Back</button>
<shiro:hasPermission name="template:create">
	<a href="${ctx}/template/create/" class="btn btn-info"> <span
		class="icon12 icomoon-icon-plus white"></span> New</a></div>
</shiro:hasPermission>

</div>
